import React, { Component } from 'react';
import { List,Scroller,Touchable } from '$yo-component';
import Header from '$component/header/index.js';
import Footer from '$component/footer/index.js';
import yoHistory from '$common/history';
require('isomorphic-fetch');
import './index.scss';

class Project extends Component {
    constructor() {
        super();
        this.state = {
            dataSource: [{key: ++guid }]
        };
    }
    //**************************** */
    getData(){
        getType:"txt";
        fetch('http://localhost:3000/skills')
        .then((res) => {
            return res.json();
            console.log(res.json())
        }).then((skills) => {
            this.setState({
                dataSource:skills
            })
        });
    }
    componentWillMount(){
        this.getData()
    }
    
    getContent() {
        return {skills}.map((item) => {
            return <div className="item" style={{ background: '#abcdef' }} key={item}>{item}</div>;
        });
    }

    getGroup(i) {
        return (
            <div key={i} className="demo-group">
                <Scroller.Sticky>
                    <div style={{ height: 40, lineHeight: 40 + 'px' }} className="sticky-title">
                        <span>{i}</span>
                    </div>
                </Scroller.Sticky>
                {/* {this.getContent()} */}
            </div>
        );
    }

    render() {
        return (
            <div className="yo-flex">
                <Header title="项目页" left={false} />
                <List
                    staticSection={
                        <div className="demo-static-header">
                            {["基础技能", "现代化前端技能", "后台技能", "工具"].map(num => this.getGroup(num))}
                        </div>
                    }
                    ref="list"
                    extraClass=" yo-scrolller-fullscreen flex"
                    dataSource={this.state.dataSource}
                    
                />
                <Footer/>
            </div>
        )
    }
}

let guid = -1;

export default Project;
